<template>
  <module
    ref="module"
    class="patrol-analysis"
    :borderConfig="borderConfig"
    :moduleConfig="moduleConfig"
    :octagon="octagon"
    :barLineConfigTop="barLineConfigTop"
    :gaugeTop="gaugeTop"
    :barLineConfigBottom="barLineConfigBottom"
    :gaugeBottom="gaugeBottom">
  </module>
</template>

<script>
import Module from './../components/Module.vue'
export default {
  name: 'patrolAnalysis',
  components: {
    Module
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '巡更分析',
        goPageUrl: '/home/patrol'
      },
      moduleConfig: {
        isOctagon: true, // 是否需要头部的八边形
        topType: '12', // 第一层显示内容
        bottomType: '12' // 第二层显示内容
      },
      barLineConfigTop: {
        title: {
          text: '近一年巡更月度完成率'
        },
        axis: {
          yAxisConversion: '%', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {
          max: 100 // 坐标轴最大值
        },
        tooltipsConfig: {
          symbol: '%',
          tipsColor: ['#2e92cb', '#b60d81'],
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      barLineConfigBottom: {
        title: {
          text: '近一年巡更月度异常率'
        },
        axis: {
          yAxisConversion: '%', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {
          max: 100 // 坐标轴最大值
        },
        tooltipsConfig: {
          symbol: '%',
          tipsColor: ['#2e92cb', '#b60d81'],
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      gaugeTop: {
        title: {
          text: '本月巡更完成率'
        },
        angle: '',
        radius: '82%'
      },
      octagon: {
        iconClass: ['icon-xungengdian', 'icon-xungengluxianzhiding'],
        octagonName: ['巡更点', '巡更路线'],
        octagonNumber: [0, 0],
        octagonUnit: ['', '']
      },
      gaugeBottom: {
        title: {
          text: '本月巡更异常率'
        },
        angle: '',
        radius: '82%'
      },
      patrolComplete: []
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 获取近一年巡更数据
    fieldContrastByMonth (isRefresh) {
      this.patrolApi.fieldContrastByMonth({ organId: this.organId }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data
          this.patrolComplete = data
        } else {
          this.patrolComplete = []
          this.gauge.angle = ''
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
        if (!isRefresh) {
          this.handleData()
        }
      }, res => {
        if (!isRefresh) {
          this.handleData()
        }
        this.patrolComplete = []
        this.$parent.showTips('请求失败，点击确认继续刷新')
      })
    },
    // 获取巡更当月数据
    presentMonth () {
      this.patrolApi.presentMonth({ organId: this.organId }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data
          this.octagon.octagonNumber = [data.spotNum, data.routeNum]
          this.gaugeTop.angle = data.finishRate
          this.gaugeBottom.angle = data.abnormalRate
        } else {
          this.octagon.octagonNumber = [0, 0]
          this.gaugeTop.angle = 0
          this.gaugeBottom.angle = 0
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, res => {
        this.octagon.octagonNumber = [0, 0]
        this.gaugeTop.angle = 0
        this.gaugeBottom.angle = 0
        this.$parent.showTips('请求失败，点击确认继续刷新')
      })
    },
    // 获取当月巡更数据
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.fieldContrastByMonth(isRefresh)
        this.presentMonth()
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.patrolComplete
      let completeArr = []
      let abnormalArr = []
      if (data.length > 0) {
        data.forEach(item => {
          completeArr.push(parseFloat(item.finishRate.replace('%', '')).toFixed(2))
          abnormalArr.push(parseFloat(item.abnormalRate.replace('%', '')).toFixed(2))
        })
      }
      this.barLineConfigTop.seriesData = [{
        data: completeArr,
        name: '完成率',
        colorIndex: 2,
        isBar: false
      }]
      this.barLineConfigBottom.seriesData = [{
        data: abnormalArr,
        name: '异常率',
        colorIndex: 1,
        isBar: false
      }]
    },
    resizeChart () {
      this.$refs.module.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.patrolAnalysisTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.patrolAnalysisTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.patrolAnalysisTimer)
  }
}
</script>
<style lang="scss" scoped>
.patrol-analysis {
  .module-content {
    width: 100%;
    height: 100%;
  }
  .module-left {
    width: 70%;
    height: 100%;
    float: left;
  }
  .module-right {
    width: 30%;
    height: 65%;
    transform: translate(0, 46%);
    float: left;
    position: relative;
    & /deep/ .singleRing-title {
      position: absolute;
      left: 0;
      bottom: 4%;
      color: #fff;
    }
  }
}
</style>
